.box{
    width:90px;
    position:relative;
    perspective:500px;
    -webkit-perspective:500px;
}
.box div{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:transparent;
    -webkit-perspective:10000px;
    backface-visibility:hidden;
    -webkit-transition: all 2s;
    -moz-transition: all 2s;
    -ms-transition: all 2s;
    -o-transition: all 2s;
}
.box :first-child{
    /*background:#f00;*/
}
.box :last-child{
    /*background:#86c4cd;*/
    -webkit-transform:rotateY(-180deg);
}


.flip {
    width:90px;
    position:relative;
    perspective:500px;
    -webkit-perspective:500px;
}
.flip div{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:transparent;
    -webkit-perspective:10000px;
    backface-visibility:hidden;
    -webkit-transition: all 2s;
    -moz-transition: all 2s;
    -ms-transition: all 2s;
    -o-transition: all 2s;
}
.flip :first-child{
    /*background:#f00;*/
    -webkit-transform:rotateY(-180deg);
}
.flip :last-child{
    /*background:#86c4cd;*/
    -webkit-transform:rotateY(-360deg);

    /*-webkit-transform:rotateY(-180deg);*/
}